<template>
  <div class="basic-number-input-outer">
<!--    @mousedown="touchState.start(-1)"-->
<!--    @mouseup="touchState.cancel"-->
    <button @click="changeNumber(value-1) " class="basic-number-input-reduce basic-number-input-button">
      <MinusOutlined class="basic-number-input-button-icon"/>
    </button>
    <div class="basic-number-input">
      <basic-input :disabled="disabled" @input="changeNumber" v-model="value" center="true" input-style="font-size: 14px;width:26px"
                   style="border-radius: 0;width: 100%;height: 40px;font-size: 12px"></basic-input>
    </div>

<!--    @mousedown="touchState.start(1)"-->
<!--    @mouseup="touchState.cancel"-->
<!--    @touchstart="touchState.start(1)"-->
<!--    @touchend="touchState.cancel"-->

    <button
            @click="changeNumber(value+1)" class="basic-number-input-add basic-number-input-button">
      <PlusOutlined class="basic-number-input-button-icon"/>
    </button>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, reactive, ref, watch} from 'vue'
import {MinusOutlined, PlusOutlined} from '@ant-design/icons-vue'

export default defineComponent({
  name: 'basic-number-input',
  components: {
    MinusOutlined,
    PlusOutlined
  },
  props: {
    'modelValue': {},
    'min': {
      default: 1
    },
    'max': {
      default: 99999
    },
    'disabled': {
      default: false
    },
    'otherValues':{
      default: {}
    }
  },
  setup(props, context) {

    watch(() => props.modelValue, (nval: any) => {
      if (nval.toString() != value.value.toString()) value.value = parseInt(nval);
    })


    const value = ref<any>(props.modelValue);

    const input=(val:any)=>{
      context.emit('change',{
        number:val,
        ...props.otherValues
      })
      return true
    }

    watch(() => value.value, (nval: any, oval: any) => {
      let a = parseInt(nval);
      if (a == null || isNaN(a)) a = props.min;
      if (a < props.min) a = props.min
      if (a > props.max) a = props.max
      if(props.disabled&&nval != a){
        setTimeout(() => {
          value.value = oval;
          context.emit('update:modelValue', oval)
        }, 20)
        return
      }
      if (nval != a) ((async () => {
        setTimeout(() => {
          value.value = a;
        }, 20)
      })());
      else {
          context.emit('update:modelValue', a)

          context.emit('toChange', {number:a,...props.otherValues})
      }
    })

    const touchState = reactive<any>({
      variable: null,
      pressTime:0,
      pressTimer: null,
      changeInterval:null,
      start(type: number) {
        if(props.disabled)return;
        console.log('start')
        touchState.variable=type;

        if (touchState.pressTimer !== null) {
          clearTimeout(touchState.pressTimer)
          touchState.pressTimer = null
        }
        if (touchState.changeInterval !== null) {
          clearInterval(touchState.changeInterval)
          touchState.changeInterval = null
        }

        touchState.pressTimer=setTimeout(()=>{
          touchState.pressTime=0;
          touchState.changeInterval=setInterval(()=>{
            if(props.disabled){
              if (touchState.pressTimer !== null) {
                clearTimeout(touchState.pressTimer)
                touchState.pressTimer = null
              }
              if (touchState.changeInterval !== null) {
                clearInterval(touchState.changeInterval)
                touchState.changeInterval = null
              }
              return;
            }
            touchState.pressTime+=70;
            let addNumber=parseInt(touchState.variable)!=NaN?parseInt(touchState.variable):1;
            if(touchState.pressTime>1000){
              addNumber*=2
            }
            if(touchState.pressTime>2000){
              addNumber*=3
            }
            if(touchState.pressTime>4000){
              addNumber*=4
            }
            if(touchState.pressTime>6000){
              addNumber*=3
            }
            value.value=parseInt(value.value)+addNumber;
          },70)
        },800);
      },
      cancel() {

        console.log('cancel')
        touchState.variable=null;
        touchState.pressTime=0;
        if (touchState.pressTimer !== null) {
          clearTimeout(touchState.pressTimer)
          touchState.pressTimer = null
        }
        if (touchState.changeInterval !== null) {
          clearInterval(touchState.changeInterval)
          touchState.changeInterval = null
        }

        input(value.value);

      }
    })

    const changeNumber=(val:any)=>{
      if(typeof val=="object"){
        val=parseInt(val.target.value)
      }
      if(!props.disabled){
        if(val>=parseInt(props.min)&&val<=parseInt(props.max)){
          value.value=parseInt(val)
        }
      }
    }

    return {
      changeNumber,
      disabled:props.disabled,
      value,
      touchState,
      input
    }
  }
})
</script>

<style lang="less" scoped>
.basic-number-input-outer {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-content: center;
  align-items: center;

  transform: translateX(2px);

  .basic-number-input-reduce {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 2px solid #bbbbbf;
  }

  .basic-number-input-button:active {
    background-color: #1677ff;

    .basic-number-input-button-icon {
      color: white !important;
      font-weight: bolder;
    }
  }

  .basic-number-input-add {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 2px solid #bbbbbf;
    right: 4px;
  }

  .basic-number-input-button {
    width: 40px;
    height: 40px;
    transition: all .18s cubic-bezier(.22, .61, .36, 1);
    background-color: white;
    padding: 0;
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-content: center;
    align-items: center;
  }

  .basic-number-input-button-icon {

  }


  .basic-number-input-button:hover {
    box-shadow: 0px 0px 0px 1px #1364f1, 0 0 4px #1364f1;
    z-index: 9999;
    border-color: #4d4a4f;

    .basic-number-input-button-icon {
      color: #1677ff;
    }

  }

  .basic-number-input {
    flex-grow: 1;
    position: relative;
    right: 2px;
  }
}


</style>
